var
    gDataStore = {},
    gELemStroe = {},
    
    conf = {
        classList : 'http://192.168.24.53:8080/NSSERVICE/CREQUEST/CLASSLIST',
         itemList : 'http://192.168.24.53:8080/NSSERVICE/CREQUEST/PLAYGROGRAMLIST?siteCode=JXGD&pageIndex=1&pageItems=20&code=',
         detail   : 'http://192.168.24.53:8080/NSSERVICE/CREQUEST/PLAYPROGRAMINFO?siteCode=JXGD&itemIndex=0&code=',
         playurl  : 'http://192.168.24.53:8080/NSSERVICE/CREQUEST/PLAYPROGRAMURL?siteCode=JXGD&itemIndex=0$code='
    },
    
    addEvent = function ( evt, fn ) {
         for ( var i=0, iMax=this.length; i< iMax; i++ ) {
             this[i].addEventListener( evt, fn, false );
         }
    },
    
    draw = {
        
        //_ 绘制分类列表
        classList : function () {
            var
                _this = this,
                
                moveFocus = function () {
                    var css = 'left: '+ (this.offsetLeft-10) +'px; top: '+ (this.offsetTop-10) +'px; width: '+ (this.clientWidth+20) +'px; height: '+ (this.clientHeight+20) +'px;';
                    gELemStroe.calssFocus.style.cssText = css;
                    gELemStroe.calssFocus.innerHTML = this.outerHTML;
                    this.focus();
                }
            
            //_ 绘制色块
            gELemStroe.class.html( function ( dt ) {
                var currentData;
                for ( var xHTML='', i=0; i< 10; i++ ) {
                    if ( currentData = dt.CLASSARRAY[i] ) {
                        xHTML += '<a href="javascript:;" rel="'+ currentData.classId +'">'+ ( currentData.className||'' ) +'</a>';
                    }
                    else {
                        xHTML += '<a></a>';
                    }
                }
                return xHTML;
            }( gDataStore.classList ) );
            
            gELemStroe.classCollect = $("#classList a");
            
            //_ 事件监听, 
            addEvent.call( gELemStroe.classCollect, 'mouseover', moveFocus );
            addEvent.call( gELemStroe.classCollect, 'focus', moveFocus );
            addEvent.call( gELemStroe.classCollect, 'click', function () {
                $.get( 'getData.php?url=' + escape( conf.classList + "?siteCode=JXGD&pageIndex=1&pageItems=20&type=1&code="+this.rel ), function ( _dts) {
                    gDataStore.subClass = _dts;
                    gELemStroe.class.hide();
                    gELemStroe.calssFocus.style.display = 'none';
                    _this.item = draw.item().show();
                });
            });
        },
        
        item: function () {
            
            this.itemMenu();
            this.itemList( gELemStroe.itemMenuCollect[0].rel );
            
            return {
                show: function () {
                    gELemStroe.item.css("display", "block");
                    return this;
                },
                hide: function () {
                    gELemStroe.item.css("display", "none");
                    return this;
                }
            }
        },
        
        //_ 绘制二级左侧列表
        itemMenu : function () {
            var _this = this;
            
            gELemStroe.itemMenu.html( function ( _dt ) {
                var currentData;
                for ( var xHTML="", i=0; i<8; i++ ) {
                    if ( currentData = _dt.CLASSARRAY[i] ) {
                        xHTML += '<a rel="'+ currentData.classId +'" href="javascript: void(0);">'+ currentData.className +'</a>';
                    }
                    else {
                        //xHTML += '<a> none </a>';
                    }
                }
                return xHTML;
            }( gDataStore.subClass ));
            
            gELemStroe.itemMenuCollect = $( "#item_menu a" );
            
            addEvent.call( gELemStroe.itemMenuCollect, "click", function () {
                _this.itemList( this.rel );
            });
        },
        
        //_ 绘制二级右侧侧列表
        itemList : function ( relId ) {
            var _this = this;
            $.get( 'getData.php?url=' + escape( conf.itemList + relId ), function ( _dts) {
                gELemStroe.itemList.html( function ( datas ) {
                    var currentData;
                    for ( var xHTML="", i=0; i<9; i++ ) {
                        if ( currentData = datas.PGMARRAY[i] ) {
                            xHTML += '<a href="javascript: void(0);" rel="'+ currentData.pgmId + '" style="background-image:url('+currentData.posterUrl+');">'+'<span>'+ currentData.pgmName +'</span>'+'</a>';
                        }
                    }
                    return xHTML;
                }( _dts ));
                
                gELemStroe.itemListCollect = $( "#item_list a" );
                addEvent.call( gELemStroe.itemListCollect, "click", function () {
                    var thumbSrc = this.style.backgroundImage;
                    $.get( 'getData.php?url=' + escape( conf.detail + this.rel ), function ( _ret) {
                        _this.item.hide();
                        _this.detail( _ret.PPGINFO||{}, thumbSrc, escape( conf.playurl + relId ) ).show();
                        
                    });
                    
                });
            });
        },
        
        detail : function ( DT, thumb, playurl ) {
            var
                _this = this
                ret = {
                    show: function () {
                        gELemStroe.detail.css("display", "block");
                    },
                    
                    hide: function () {
                        gELemStroe.detail.css("display", "none");
                    }
                },
                
                toTime = function ( str ) {
                    
                    return parseInt( str / 3600 ) +':' + parseInt( str / 60 ).fixLen("00") +':' + ( str % 60).fixLen("00")
                };
            
            gELemStroe.detail.html( function ( _DT ) {
                var xHTML = '<div class="name">'+_DT.pgmName+'</div>' +
                            
                            '<div class="thumb" style="background-image: '+thumb+';"></div>'+
                            
                            '<div class="duration">影片时长: ' + toTime(_DT.duration) + '</div>' +
                            '<div class="keyWords">关 键 词: ' + _DT.keyWords + '</div>' +

                            '<div class="playButton"><a id="playBtn" rel="1" href="javascript:;">播 放</a></div>' +
                            '<div class="backButton"><a id="backBtn" rel="0" href="javascript:;">返 回</a></div>' +
                            
                            '<div class="introdTable"><a id="introdBtn" rel="2" href="javascript:;">文字介绍</a></div>' +
                            '<div class="screenTable"><a id="screenBtn" rel="3" href="javascript:;">视屏截图</a></div>' +
                            
                            '<div class="introduce"><p>'+_DT.contentInfoStr+'</p></div>' +
                            '<div class="screenshot"></div>';
                return xHTML;
            }( DT ));
            
            var tableBtn = $("#introdBtn, #screenBtn");
            tableBtn[0].style.backgroundColor = "rgba( 198,107, 187, 0.6)";
            tableBtn[0].style.color = "#FFFFFF";
            
            addEvent.call( $("#introdBtn, #screenBtn, #playBtn, #backBtn"), "click", function () {
                switch ( this.rel ) {
                    case "0":
                        _this.item.show();
                        ret.hide();
                        break;

                    case "1":
                        $.get( 'getData.php?url=' + playurl, function ( RET ) {
                            var playURL = RET.PGMPLAY.playUrl;
                            //_ 播放动作 do something
                        });
                        break;
                        
                    case "2":
                    case "3":
                        tableBtn.css({"backgroundColor": "", "color":""});
                        this.style.backgroundColor = "rgba( 198,107, 187, 0.6)";
                        this.style.color = "#FFFFFF";
                        $(".introduce, .screenshot").css("display", "none")[ (this.rel - 2) ].style.display = "block";
                        break;
                }
            });
            
            return ret;
        }
        
    };

window.onload = function () {
    //_ *初始化

    gELemStroe.calssFocus = document.getElementById("classListFocus");
    gELemStroe.class = $("#classList");
    
    gELemStroe.item      = $("#item");
    gELemStroe.itemMenu  = $("#item_menu");
    gELemStroe.itemList  = $("#item_list");
    
    gELemStroe.detail = $("#details");
    
    $.post( 'getData.php?url=' + escape(conf.classList + '?siteCode=JXGD&pageIndex=1&pageItems=8&code=f_1'), function ( _dt ) {
        gDataStore.classList = _dt;
        draw.classList();
    });
}



